<template>
  <div class="app-container">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <!-- <el-form-item label="查询账号">
        <el-input v-model="formInline.user" placeholder="请输入账号"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="onSubmit"></el-button>
      </el-form-item> -->
      <!-- <el-form-item>
        <el-button type="primary"  @click="selectMeall">本公司所有账号</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary"  @click="seleCtall">所有账号</el-button>
      </el-form-item> -->
      <el-form-item>
        <el-button type="primary"  @click="create">创建账号</el-button>
      </el-form-item>

    </el-form>
    <el-dialog title="创建账号" :visible.sync="dialogFormVisiblea" width="20%">
     <el-form ref="form" :model="form" label-position="left" label-width="100px">
       
           <el-form-item label="姓名" :label-width="formLabelWidth">
             <el-input v-model="form.name" autocomplete="off" placeholder="请填写姓名"></el-input>
           </el-form-item>
           <el-form-item label="用户名" :label-width="formLabelWidth">
             <el-input v-model="form.username" autocomplete="off" placeholder="请填写用户名"></el-input>
           </el-form-item>
           <el-form-item label="密码" :label-width="formLabelWidth">
             <el-input type="password" v-model="form.password" autocomplete="off" placeholder="请填写密码"></el-input>
           </el-form-item>
           <el-form-item label="确认密码" :label-width="formLabelWidth">
             <el-input type="password" v-model="form.qpassword" autocomplete="off" placeholder="请确认密码"></el-input>
           </el-form-item>
         <el-form-item label="手机号" :label-width="formLabelWidth">
           <el-input v-model="form.phone" autocomplete="off" placeholder="请填写手机号"></el-input>
         </el-form-item>
         <el-form-item label="特权" :label-width="formLabelWidth">
             <el-select v-model="form.privilege" placeholder="请选择权限">
               <el-option label="查看权限" value="10000000"></el-option>
               <el-option label="指导权限" value="11000000"></el-option>
               <el-option label="代理权限" value="11100000"></el-option>
               <el-option label="执行权限" value="11110000"></el-option>
               <el-option label="操作权限" value="11111000"></el-option>
               <el-option label="助理权限" value="11111100"></el-option>
               <el-option label="经理权限" value="11111110"></el-option>
               <el-option label="超级权限" value="11111111"></el-option>
             </el-select>
           </el-form-item>
         <el-form-item label="邮箱" :label-width="formLabelWidth">
           <el-input v-model="form.email" autocomplete="off" placeholder="请填写邮箱"></el-input>
         </el-form-item>
       <el-form-item>
         <el-button type="primary" size="mini" @click="onSubmits('form')">创建</el-button>
         <el-button size="mini" @click="Cancel">取消</el-button>
       </el-form-item>
     </el-form>
    </el-dialog>
    <el-table
       :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
       style="width: 180%">
       <el-table-column
         label="ID"
         width="180">
         <template slot-scope="scope">
           <span>{{ scope.row.agentID }}</span>
         </template>
       </el-table-column>
       <el-table-column
         label="用户名"
         width="180">
         <template slot-scope="scope">
           <span>{{ scope.row.username }}</span>
         </template>
       </el-table-column>
       <el-table-column
         label="姓名"
         width="180">
         <template slot-scope="scope">
           <span>{{ scope.row.name }}</span>
         </template>
       </el-table-column>
       <el-table-column
         label="手机号"
         width="180">
         <template slot-scope="scope">
           <span>{{ scope.row.phone }}</span>
         </template>
       </el-table-column>
       <el-table-column
         label="邮箱"
         width="180">
         <template slot-scope="scope">
           <span>{{ scope.row.email }}</span>
         </template>
       </el-table-column>
       <el-table-column
         label="状态"
         width="180">
         <template slot-scope="scope">
           <el-switch
           v-model="scope.row.status"
           :active-value="0"
           :inactive-value="1"
           active-color="#13ce66"
           inactive-color="#ff4949"
           disabled
           ></el-switch>
         </template>
       </el-table-column>
       <el-table-column label="操作"  width="580">
         <template slot-scope="scope">
           <el-button
             size="mini"
             type="danger"
             @click="Restsetting(scope.$index)">重置密码</el-button>
           <el-button
             size="mini"
             type="primary"
              @click="Qusetting(scope.$index)">编辑</el-button>
              <el-button
             size="mini"
             type="primary"
              @click="QusetUpdate(scope.$index)">授权</el-button>
         </template>
       </el-table-column>
     </el-table>
    <el-dialog title="授权" :visible.sync="dialogFormVisibleu" width="20%">
     <el-form ref="form" :model="upforms" label-position="left" label-width="100px">
           <el-form-item label="ID" :label-width="formLabelWidth">
             <el-input v-model="upforms.agentID" autocomplete="off"></el-input>
           </el-form-item>
          <el-form-item label="状态" :label-width="formLabelWidth">
             <el-select v-model="upforms.status" placeholder="选择状态">
               <el-option label="成功登陆" :value=0></el-option>
               <el-option label="禁止登陆" :value=1></el-option>          
             </el-select>
           </el-form-item>
         <el-form-item label="特权" :label-width="formLabelWidth">
             <el-select v-model="upforms.privilege" placeholder="请选择权限">
               <el-option v-if="upforms.privilege=='00000000'?true:false" label="暂无权限" value='00000000'></el-option>
               <el-option label="查看权限" value="10000000"></el-option>
               <el-option label="指导权限" value="11000000"></el-option>
               <el-option label="代理权限" value="11100000"></el-option>
               <el-option label="执行权限" value="11110000"></el-option>
               <el-option label="操作权限" value="11111000"></el-option>
               <el-option label="助理权限" value="11111100"></el-option>
               <el-option label="经理权限" value="11111110"></el-option>
               <el-option label="超级权限" value='11111111'></el-option>
             </el-select>
           </el-form-item>
       <el-form-item>
         <el-button type="primary" size="mini" @click="privUpdata">授权</el-button>
         <el-button size="mini" @click="Cancel">取消</el-button>
       </el-form-item>
     </el-form>
    </el-dialog>
     <div class="pages" v-if="tableData!=''">
       <div class="block">
         <el-pagination
           @current-change="handleCurrentChange"
           :current-page.sync="currentPage"
           :page-size="pagesize"
           layout="prev, pager, next, jumper"
           :total="total">
         </el-pagination>
       </div>
      </div>
     <el-dialog title="编辑" :visible.sync="dialogFormVisible" width="20%">
      <el-form ref="form" :model="forms" label-position="left" label-width="100px">     
          <el-input type="hidden" v-model="forms.agentID" autocomplete="off"></el-input>
        <el-form-item label="姓名" prop="pass">
          <el-input type="text" v-model="forms.name" autocomplete="off"  placeholder="请填写姓名"></el-input>
        </el-form-item>
        <el-form-item label="用户名" prop="pass">
          <el-input type="text" v-model="forms.username" autocomplete="off"  placeholder="请填写用户名"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="pass">
          <el-input type="password" v-model="forms.password" autocomplete="off"  placeholder="请填写密码"></el-input>
        </el-form-item>
         <el-form-item label="确认密码" prop="pass">
          <el-input type="password" v-model="forms.qpassword" autocomplete="off"  placeholder="请确认密码"></el-input>
        </el-form-item>
        <el-form-item label="手机" prop="pass">
          <el-input type="text" v-model="forms.phone" autocomplete="off"  placeholder="请填写手机号"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="pass">
          <el-input type="text" v-model="forms.email" autocomplete="off"  placeholder="请填写邮箱"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="mini" @click="onSubmits('forms')">修改</el-button>
          <el-button size="mini" @click="Cancel">取消</el-button>
        </el-form-item>
      </el-form>
     </el-dialog>
     <el-dialog title="重置密码" :visible.sync="dialogFormVisibles" width="20%">
     <el-form :model="ruleForm" status-icon  label-width="100px" class="demo-ruleForm">
       <el-input type="hidden" v-model="ruleForm.agentID" autocomplete="off"></el-input>
       <el-form-item label="密码" prop="passs">      
         <el-input type="password" v-model="ruleForm.password" autocomplete="off"  placeholder="请填写密码"></el-input>
         
       </el-form-item>
       <el-form-item label="确认密码" prop="checkPass">
         <el-input type="password" v-model="ruleForm.qpassword" autocomplete="off"  placeholder="请确认密码"></el-input>
       </el-form-item>
        <el-form-item>
          <el-button type="primary" size="mini" @click="Reset">重置</el-button>
          <el-button size="mini" @click="Cancel">取消</el-button>
        </el-form-item>
      </el-form>
     </el-dialog>
  </div>
</template>

<script>
import Method from '@/utils/proto'
import {posts} from '@/api/api'
import Error from '@/utils/error'
import { mapGetters } from 'vuex'
export default {

  data() {

    return {
       formInline: {
        user: '',
      },
      total: 100,
      currentPage: 0,
      pagesize: 15,
      tableData: [],
      dialogFormVisible: false,
      dialogFormVisibles: false,
      dialogFormVisiblea: false,
      dialogFormVisibleu:false,
      form: {
        method:Method.Method.MSG_AGENT_CREATE,
        token:this.$store.getters.token,
        qpassword:'',
        name: '',
        username:'',
        password:'',
        privilege:'',
        phone: '',
        email:'',
      },
      forms: {
        method:Method.Method.MSG_AGENT_UPDATE,
        token:this.$store.getters.token,
        name: '',
        password:"",
        qpassword:'',
        agentID: '',
        username:'',  
        phone: '',
        email:'',
      },
      upforms: {
        method:Method.Method.MSG_AGENT_GRANT,
        token:this.$store.getters.token,
        agentID: '',
        status:'',
        privilege:'',
      },
       formLabelWidth: '120px',
        ruleForm: {
         method:Method.Method.MSG_AGENT_RESET_PASSWORD,
         token:this.$store.getters.token,
         agentID: '',
         password: '',
         qpassword: ''
       },   
    }
  },
  computed: {
    ...mapGetters([
      'roles'
    ])
  },
  watch: {
    filterText(val) {
      this.$refs.tree2.filter(val)
    }
  },
  methods: {
    privUpdata(){
        posts(this.upforms).then((res) => { 
          if(res.result == 0){
            this.dialogFormVisibleu=false  
            this.onload()
            this.$message({
            type: "success",
            message: "授权成功!",
          });
          }else{
            this.$message({
            type: 'error',
            message: Error.getErrorMessage(res.result),
          });
         }
      }).catch()
    },
    selectMeall(){},
    seleCtall(){},
    toAuther(){},
    handleCurrentChange(val) {
      this.currentPage = val;
    },
     Restsetting(index) {
       let roles = this.$store.getters.roles
       if(roles!=11111111&&roles!=11111110){
         this.$message({
           type:'warning',
           message:'没有权限执行此操作'
         })
         return
       }
       this.dialogFormVisibles=true
       this.ruleForm.agentID = this.tableData[index].agentID
     },
     Qusetting(indexs) {
      let roles = this.$store.getters.roles
       if(roles!=11111111){
         this.$message({
           type:'warning',
           message:'没有权限执行此操作'
         })
         return
       }
       this.dialogFormVisible=true
       this.forms.agentID = this.tableData[indexs].agentID
       this.forms.name = this.tableData[indexs].name
       this.forms.password = this.tableData[indexs].password
       this.forms.phone = this.tableData[indexs].phone
       this.forms.email = this.tableData[indexs].email
       this.forms.username = this.tableData[indexs].username 
     },
     QusetUpdate(indexs){
       let roles = this.$store.getters.roles
       if(roles!="11111111"&&roles!="11111110"){
         this.$message({
           type:'warning',
           message:'没有权限执行此操作'
         })
         return
       }
       this.upforms.agentID = this.tableData[indexs].agentID
       this.upforms.status = this.tableData[indexs].status
       this.upforms.privilege = this.tableData[indexs].privilege 
       this.dialogFormVisibleu = true
     },
     onSubmit() {
       posts(this.forms).then((res) => {
          if(res.result==0){
           this.$message({
            type: "success",
            message: "修改成功!",          
          });
          this.dialogFormVisible=false
          this.onload()
        } else{
        this.$message({
          type: 'error',
          message: Error.getErrorMessage(res.result),
        });
       } 
       
      }).catch()
     },
     Reset() {
       const that = this
       let data = that.ruleForm
       if(data.password == ''){
         this.$message({
            type: 'error',
            message: "密码不能为空!",
          });
          return
       }
        if(data.password.length<=6){
         this.$message({
            type: 'error',
            message: "密码不能少于6位!",
          });
          return
       }
       if(data.password == data.qpassword){
       delete data.qpassword
       posts(data).then((res) => {
        if(res.result==0){
           this.$message({
            type: "success",
            message: "重置成功!",
          });
        }else{
          this.$message({
            type: 'error',
            message: Error.getErrorMessage(res.result),
          });
         }  
        this.dialogFormVisibles=false
      }).catch()
      }else{
        this.$message({
          message: '密码不一致',
          type: 'warning'
        });
      }
     },
     create(){
     let roles = this.$store.getters.roles
       if(roles!=11111111&&roles!=11111110&&roles!=11111100){
         this.$message({
           type:'warning',
           message:'没有权限执行此操作'
         })
         return
       }
      this.dialogFormVisiblea=true
     }, 
     onSubmits(res) {
       const that = this
       if(res=='form'){
         var data = that.form
       }else{
         var data = that.forms
       }
       if(data.name ==''||data.name == null){
          this.$message({
              type:'error',
              message: `姓名不能为空`
          })
          return
       }
       if(data.username ==''||data.username ==null){
          this.$message({
              type:'error',
              message: `用户名不能为空`
          })
          return
       }
        if(data.password== undefined||data.password== null){
          this.$message({
              type:'error',
              message: `密码不能为空`
          })
          return
       }
       if(data.password.length <= 6){
          this.$message({
              type:'error',
              message: `密码不能少于六位`
          })
          return
       }
       if(data.password != data.qpassword){        
         this.$message({
          message: '密码不一致',
          type: 'error'
        });
         return
       }
       let reg = /^1[0-9]{10}$/;
       if (data.phone == "" ||data.phone <= 10 || !reg.test(data.phone)) {
        this.$message({
            message: '请输入正确的手机号',
            type: 'error'
        })
        return
      }
      let regEmail = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
        if (data.email == '' || !regEmail.test(data.email)) {
            this.$message({
                message: '邮箱格式不正确',
                type: 'error'
            })
            return
       }
       if(res=='form'){
         this.onSubmitcrate(data)   
       }else{
         this.onSubmit(data)   
       }
       
     },
     onSubmitcrate(data){
       delete data.qpassword  
       this.dialogFormVisiblea=false
      posts(data).then((res) => {
            if(res.result == 0){
              this.$message({
                type:'success',
                message:'创建成功'
              })
            }else{
              this.$message({
              type: 'error',
              message: Error.getErrorMessage(res.result),
            });
        }
           this.onload()
          }).catch()
      },
     Cancel(){
       this.dialogFormVisible=false
       this.dialogFormVisibles=false
       this.dialogFormVisibleu=false
       this.dialogFormVisiblea=false
     },
     onload(){
      let data={
        method:Method.Method.MSG_AGENT_LIST,
        token:this.$store.getters.token,
        type:2
      }
      let ping={
        method:Method.Method.MSG_AGENT_PING,
        token:this.$store.getters.token,
      }
       posts(data).then(res => {
         console.log(res);
        this.tableData = res.list    
        this.total = res.list.length
      }).catch()
       posts(ping).then(res => {
      }).catch()
     }
   },
    created: function(){
      this.onload()
     },
}
</script>
<style lang="scss" scoped>
  .pages{
    width: 100%;
    margin-top: 2%;
    display: flex;
    justify-content: center;
  }
</style>
